<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" media="screen"
	href="/slstone/css/jqgrid/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="/slstone/css/jqgrid/ui.jqgrid.css" />

<!-- jqgrid 皮肤更改,需要在 jquery UI 官网 下载 -->
<link rel="stylesheet" type="text/css" media="screen"
	href="/slstone/css/jqgrid/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="/slstone/css/jqgrid/jquery-ui.css" />


<script src="/slstone/js/jqgrid/js/jquery-1.8.3.js"
	type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js/jquery-ui-1.9.2.custom.js"
	type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js//i18n/grid.locale-cn.js"
	type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js/jquery.jqGrid.min.js"
	type="text/javascript"></script>



<script type="text/javascript">    
$(function()
{
	jQuery("#ghwcs").jqGrid({
   	url:'server.php?q=4',
	datatype: "json",	
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
   	rowNum:10,
    width:700,
   	rowList:[10,20,30],
   	pager: '#pghwcs',
   	sortname: 'invdate',
    viewrecords: true,
    sortorder: "desc",
	jsonReader: {
		repeatitems : false
	},
	caption: "Group Header",
	height: '100%'
});
jQuery("#ghwcs").jqGrid('setGroupHeaders', {
  useColSpanStyle: true, 
  groupHeaders:[
	{startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
	{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]	
});

});

	    

</script>

<title>Insert title here</title>
</head>
<body>
<body>
	<table id="ghwcs" class="scroll"></table>
</body>
</body>
</html>